 <template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item 
      v-for="(item, index) in breadcrumbs" 
      :key="item.path"
      :to="index === breadcrumbs.length - 1 ? null : { path: item.path }"
    >
      {{ item.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const breadcrumbs = computed(() => {
  const { matched } = route
  return matched
    .filter(item => item.meta?.title && item.path !== '/admin')
    .map(item => ({
      path: item.path,
      title: item.meta.title
    }))
})
</script>

<style lang="scss" scoped>
.app-breadcrumb {
  display: inline-block;
  line-height: 1;

  :deep(.el-breadcrumb__item) {
    .el-breadcrumb__inner {
      color: #666;
      font-weight: normal;
      
      &.is-link {
        color: #666;
        
        &:hover {
          color: var(--el-color-primary);
        }
      }
    }

    &:last-child {
      .el-breadcrumb__inner {
        color: #333;
      }
    }
  }
}
</style>